<template>


    <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">

        <el-card class="info-card" style="height: auto;max-height: 100%;">
            <template #header>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <h3>添加{{ task_title }}</h3>
                    <el-button type="primary" round size="large" @click="$router.back()">返回</el-button>
                </div>
            </template>


            <div style="display: flex; flex-direction: column; align-items: center;">
                <el-form status-icon :model="form" :rules="rules" ref="ruleForm">
                    <div class="info_row">
                        <div class="info_row_left">{{ task_title }}名称：</div>
                        <el-form-item prop="name">
                            <div class="info_row_right">
                                <el-input v-model="form.name" maxlength="30" show-word-limit
                                    :placeholder="`请输入${task_title}名称`" />
                            </div>
                        </el-form-item>
                    </div>

                    <div class="info_row">
                        <div class="info_row_left">相关资源：</div>
                        <div class="info_row_right">
                            <UploadFiles ref="childComponent" :btnDisabled=btnDisabled :existingFiles=existingFiles
                                @update:fileList="handleFileListUpdate" />
                        </div>
                    </div>


                    <div class="info_row">
                        <div class="info_row_left">开始时间：</div>
                        <el-form-item prop="start_time">
                            <div class="info_row_right">
                                <el-date-picker type="datetime" placeholder="选择开始时间" size="default" clearable
                                    v-model="form.start_time" />
                            </div>
                        </el-form-item>
                    </div>

                    <div class="info_row">
                        <div class="info_row_left">结束时间：</div>
                        <el-form-item prop="end_time">
                            <div class="info_row_right">
                                <el-date-picker type="datetime" placeholder="选择截止时间" size="default" clearable
                                    v-model="form.end_time" />
                            </div>
                        </el-form-item>
                    </div>
                    <div class="info_row">
                        <div class="info_row_left">{{ task_title }}描述：</div>
                        <div class="info_row_right">
                            <el-input type="textarea" maxlength="255" show-word-limit v-model="form.description"
                                :placeholder="`请输入${task_title}描述`" />
                        </div>
                    </div>
                    <div class="info_row">
                        <div class="info_row_left">{{ task_title }}分数：</div>
                        <el-form-item prop="score">
                            <div class="info_row_right">
                                <el-input type="number" v-model="form.score" :placeholder="`请输入${task_title}分数`" />
                            </div>
                        </el-form-item>
                    </div>

                </el-form>

            </div>

            <div>
                <el-button type="primary" :loading=btnLoading @click="handelCreateTask" style="margin-top: 20px;">创建{{
                        task_title
                    }}
                </el-button>
            </div>
        </el-card>
    </div>


</template>

<script lang="ts" setup>
import { ref, Ref, onMounted} from 'vue'
import UploadFiles from "@/views/main/public/publicKit/uploadFiles.vue";
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'

import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { createTaskApi } from '@/api/task';


const btnLoading = ref(false)
const task_title = ref('')
const store = useStore()
const btnDisabled = ref(false)
const existingFiles = ref([]);
const ruleForm: Ref<ElFormItemContext | null> = ref(null)
const childComponent = ref(null);
const callChildMethod = (params: any) => {
    if (childComponent.value) {
        childComponent.value.childMethod(params);
    }
};
const handleFileListUpdate = (newFileList: any) => {
    // 更新父组件中的 existingFiles
    fileList.value = newFileList;
};
const fileList = ref([])
const form = ref({
    task_type: history.state.task_type,
    user_id: store.state.user.user_id,
    course_id: history.state.course_id,
    homework_file: '',
    name: '',
    start_time: null,
    end_time: null,
    description: '',
    score: 100,
});
const rules = {

    name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
    start_time: [{ required: true, message: '请选择任务开始时间', trigger: 'blur' }],
    end_time: [{ required: true, message: '请选择任务结束时间', trigger: 'blur' }],
    score: [{ required: true, message: '请输入任务分数', trigger: 'blur' }],

}
onMounted(() => {
    if (history.state.task_type === 'homework') {
        task_title.value = '作业'
    } else if (history.state.task_type === 'exam') {
        task_title.value = '考试'
    } else if (history.state.task_type === 'experiment') {
        task_title.value = '实验'
    }
});
const handelCreateTask = () => {
    btnLoading.value = true;
    if (form.value.name.trim() === '') {
        ElMessage.error('开课学期不能为空');
        return;
    }
    try {
        createTaskApi(form.value).then((res: any) => {
            if (res.code === 200) {
                ElMessage.success(`创建"${task_title.value}"成功`);
                if (fileList.value.length > 0) {

                    callChildMethod({
                        task_id: res.data,
                        task_type: form.value.task_type,
                        course_id: String(form.value.course_id),
                    })

                } else {
                    btnLoading.value = false;
                }
            } else {
                ElMessage.error(`创建"${task_title.value}"失败`);
            }
        });
    } catch (error) {
        ElMessage.error(`创建"${task_title.value}"失败`);
    } finally {
    }
};

</script>

<style lang="scss" scoped>
.info-card {
    position: relative;
    width: 100vw;
    max-width: 1200px;
    height: auto;
    max-height: 600px;

    align-content: center;
    margin-top: 10px;
}



.info_row {
    display: flex;
    justify-content: space-between;
    // width: 600px;
    margin-bottom: 30px;
    vertical-align: auto;
    align-self: center;
}

.info_row_left {
    width: 10vw;
    min-width: 100px;
    text-align: left;
    font-size: large;
}

.info_row_right {
    width: 30vw;
    min-width: 500px;
    text-align: left;
    font-size: large;

}
</style>